<template>
  <div class="user">
    <div class="search">
      <page-search :searchFormConfig="searchFormConfig"></page-search>
    </div>
    <div class="content">
      <!-- <el-table :data="userList" border style="width: 100%">
        <template v-for="item in tableConfig" :key="item.prop">
          <el-table-column v-bind="item"></el-table-column>
        </template>
      </el-table> -->
      <cc-table :tableConfig="tableConfig" v-model="userList">
        <template #enable="scope">
          <el-button>{{ scope.row.enable ? '✔' : '×' }}</el-button>
        </template>
        <template #createAt="scope">
          {{ scope.row.createAt }}
        </template>
      </cc-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '@/store'
import { searchFormConfig, url, tableConfig } from './config'
import { PageSearch } from '@/components/page-search'
import { CcTable } from '@/base-ui/table'

export default defineComponent({
  name: 'user',
  components: { PageSearch, CcTable },
  setup() {
    const store = useStore()
    store.dispatch('system/getPageListAction', {
      pageUrl: url.User.selectAll
    })

    // 计算属性监听状态变更则更新视图显示
    // userList: IUser[]
    const userList = computed(() => {
      return store.state.system.userList
    })

    const userCount = computed(() => {
      return store.state.system.userCount
    })

    return { searchFormConfig, userList, userCount, tableConfig }
  }
})
</script>
<style scoped lang="less">
.content {
  padding: 10px;
}
</style>
